<!doctype html>
<html lang="en">
    <head>
        <title>Impress Demo</title>
        <meta charset="utf-8" />
        <!--<meta name="viewport" content="width=1024" />
        <link href="css/impress-demo.css" rel="stylesheet" /> -->
        <style>
            body{
                width:1024px;
                font-size:20px;
            }
        .slide{
            height:400px;
            width:600px;
            background:#FFF;
            border:1px solid #FFF;
        }
        #animation-container {
        animation: inout 3s;
        animation-iteration-count: infinite;
        -webkit-animation: inout 3s; /* Safari & Chrome */
        -webkit-animation-iteration-count: infinite;
        margin: auto;
        }
        @keyframes inout {
        0%    { transform: scale(0.9, 0.9); }
        25%   { transform: scale(1.1, 1.1); }
        50%   { transform: scale(0.9, 0.9); }
        75%   { transform: scale(1.1, 1.1); }
        100%  { transform: scale(0.9, 0.9); }
        }
        
        @-webkit-keyframes inout { /* Safari & Chrome */
        0%   { -webkit-transform: scale(0.9, 0.9); }
        25%  { -webkit-transform: scale(1.1, 1.1); }
        50%  { -webkit-transform: scale(0.9, 0.9); }
        75%  { -webkit-transform: scale(1.1, 1.1); }
        100% { -webkit-transform: scale(0.9, 0.9); }
        }
        #transition-container {
        transition:All 1s linear;
        transform: scale(1);
        transition-duration: 1s;
        -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */
        }
        #transition-container:hover {
        transition:width 3s, height 3s;
        /*transform: scale(1.1); */
        animation: inout 3s;
        animation-iteration-count: infinite;
        }
        @keyframes resize {
        0% {
            padding: 0;
        }
        50% {
            padding: 0 20px;
            color:grey;
        }
        100% {
            padding: 0 100px;
            color:black;
        }
        }

        #box {
        animation-name: resize;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function: ease-in-out;
        }
        .step {
        /*opacity:0.2 ;*/
        }
        .step.past {
        opacity: 1;
        }
        .slide{
        opacity: 1;        
        }
        .slide.future{
        opacity: 0;        
        }
        .slide.past{
        opacity: 1;        
        }
        #slide2 p{
            position:absolute;
            font-size: 40px;
            white-space: nowrap;
            border:5px solid black;
            text-align:center;
            width:200px;
            height:60px
        }
        #slide3 p{
            position:absolute;
            font-size: 40px;
            border:5px solid black;
            text-align:center;
            width:200px;
            height:60px
        }
        </style>
    </head>
    <body>
        <div id="impress">
            <div id="Title" class="step">
                    <p style='width:1024px;font-size:60px;
                    text-align:center'>Temporal Raster and Vector Algebra in GRASS GIS</p>
                    <p style="width:1024px;text-align:center;font-size:60px">Tutorial</p>
                </div>
            <div id="transition-container" style="position:absolute; top:-300px; left:200px;">
               <a href="http://www.ti.bund.de/en"> <img src="THUENEN_Office_RGB_transparent.png" align="right" 
                    width="300" alt="Thünen-Institute" title="Thünen-Institute"> </a>
            </div>
            <div id="transition-container" style="position:absolute; top:175px; left:-200px;">
               <a href="http://www.google-melange.com/gsoc/project/google/gsoc2013/mastho/5001"> 
                    <img src="banner-gsoc2012.png" align="right" width="400" alt="GSoC" 
                    title="Google-Summer-of-Code"> </a>
            </div>
            <div id="transition-container" style="position:absolute; top:-300px; left:-450px;">
                <a href="http://grass.osgeo.org/"> <img src="30-years_grass_gis_logo.png" 
                    align="right" width="150" alt="GRASS GIS" title="GRASS GIS"> </a>
            </div>
            <div id="slide2" data-y="800" class="step slide" data-z=-100>
                <p class="slide" style='left: -200px; top: 0px;'>
                Vector</p>
                <p class="slide" style='left: 150px; top: 0px;'>
                Temporal</p>
                <p class="slide" style='left: 500px; top: 0px;'>
                Raster</p>
                </div>
            <div id="slide3" data-y="800" data-z=-100 class="step slide">
                <p class="slide" style='left: -200px; top: 200px;'>
                Vector</p>
                <p class="slide" style='left: 150px; top: 200px;'>
                Temporal</p>
                <p class="slide" style='left: 500px; top: 200px;'>
                Raster</p>
            </div>
            <div id="slide4" data-x="2200" data-y="-500" class="step slide">
                    <p>This Slide Moves Top To Bottom</p>
            </div>
            <div id="slide5" data-x="3200" data-rotate="150" class="step slide">
                <p>This Slide Rotates Clockwise Around z-axis</p>
            </div>
            <div id="slide6" data-x="6200" data-scale='3' class="step slide">
                    <p>This Slide Scales 3 Times</p>
            </div>
            <div id="slide7" data-x="4200" data-y='1500' data-z='1500' class="step slide">
                    <p>Away</p>
            </div>
            <div id="slide8" data-x="4900" data-y='1500' data-z='100' class="step slide">
                    <p>Towards</p>
            </div>
            <div id="slide9" data-x="5600" data-y='1500' data-z='-1500' class="step slide">
                <p>Futher Towards</p>
            </div>
            <div id="slide10" data-x="5600" data-y='1500' data-z='-2100' class="step slide">
            </div>
            <div id="slide11" data-x="6600" data-y='3000' data-scale='10' class="step slide">
                    <p>Visualization Slide Positions</p>
            </div>
        </div>
        <script src="js/impress.js"></script>
        <script>impress().init();</script>
    </body>
</html>
